import { AppBar, Toolbar, Typography, Button, IconButton, Badge, Menu, MenuItem, Box, Avatar } from '@mui/material';
import { Search as SearchIcon, Notifications as NotificationsIcon, Message as MessageIcon } from '@mui/icons-material';
import { useMessages } from '../features/messages/MessagesContext';
import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../features/auth/AuthContext';

const Navbar = () => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const navigate = useNavigate();
  const { user, logout } = useAuth();
  const { unreadCount } = useMessages();

  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleMenuItemClick = (path: string) => {
    handleClose();
    navigate(path);
  };

  const handleLogout = () => {
    handleClose();
    logout();
    navigate('/login');
  };

  return (
    <AppBar position="sticky" sx={{ width: '100%', margin: 0, padding: 0 }}>
      <Toolbar>
        {user && (
          <Typography
            variant="h6"
            component={Link}
            to="/"
            sx={{ flexGrow: 1, textDecoration: 'none', color: 'inherit' }}
          >
            思源PT站点
          </Typography>
        )}
        {!user && (
          <Box sx={{ flexGrow: 1 }}></Box>
        )}

        {user ? (
          <>
            <Button
              color="inherit"
              component={Link}
              to="/friends"
              title="好友"
            >
            好友
            </Button>

            <Button color="inherit" component={Link} to="/resources">资源</Button>
            <Button color="inherit" component={Link} to="/community">社区</Button>

            {/* 只有管理员才显示管理按钮 */}
            {user?.role === 'ADMIN' && (
              <Button color="inherit" component={Link} to="/admin">管理</Button>
            )}

            <Box sx={{ display: 'flex', alignItems: 'center' }}>
              <IconButton
                size="large"
                onClick={handleMenu}
                color="inherit"
                sx={{ padding: 0 }}
              >
                <Avatar
                  sx={{ width: 40, height: 40 }}
                  src={user?.avatar || undefined}
                  alt={user?.username || "用户头像"}
                />
              </IconButton>
              <Menu
                anchorEl={anchorEl}
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem onClick={() => handleMenuItemClick(`/profile/${user?.id}`)}>个人中心</MenuItem>
                <MenuItem onClick={() => handleMenuItemClick('/my-posts')}>我的帖子</MenuItem>
                <MenuItem onClick={() => handleMenuItemClick('/purchases')}>我的购买</MenuItem>
                <MenuItem onClick={() => handleMenuItemClick('/my-resources')}>资源管理</MenuItem>
                <MenuItem onClick={handleLogout}>退出登录</MenuItem>
              </Menu>
            </Box>
          </>
        ) : (
          <>
            <Button color="inherit" component={Link} to="/login">登录</Button>
            <Button color="inherit" component={Link} to="/register">注册</Button>
          </>
        )}
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;